<template>
    <div class="wrapper1">
        <scroller>
            <wxc-searchbar ref="wxc-searchbar"
                           autofocus="true"
                           @wxcSearchbarCancelClicked="wxcSearchbarCancelClicked"
                           @wxcSearchbarInputReturned="wxcSearchbarInputReturned"
                           @wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"
                           @wxcSearchbarCloseClicked="wxcSearchbarCloseClicked"
            ></wxc-searchbar>

            <!--<div style="position: relative;">
                <category title="搜索历史"></category>
                <text style="position: absolute; right: 20px; bottom: 15px; color: #7d7d7d; font-size: 22px;">清空</text>
            </div>
            <div class="history" style="flex-direction: row; justify-content: flex-start; flex-wrap: wrap; padding: 20px;">
                <div v-for="(item, idx) in historyList" :key="idx" @click="historyTagClicked(item.text)">
                    <wxc-tag type="solid"
                             tag-color="#ff5000"
                             font-color="#ffffff"
                             :value="item.text"
                             style="margin-right: 20px; margin-top: 20px;"
                    ></wxc-tag>
                </div>
            </div>-->
            <div class="">
                <div>
                    <category title="推荐类目"></category>
                </div>
                <div class="cat-1">
                    <wxc-grid-select
                        :single="true"
                        :cols="4"
                        :list="cat1List"
                        @select="params => onCat1Select('res3', params)">
                    </wxc-grid-select>
                </div>
                <div>
                    <category title="小类"></category>
                </div>
                <div class="cat-2">
                    <wxc-grid-select
                        :single="true"
                        :cols="4"
                        :list="cat2List"
                        @select="params => onCat2Select('res3', params)">
                    </wxc-grid-select>
                </div>
            </div>
        </scroller>
        <div style="">
            <!--<text class="bottom-search-btn">搜索</text>-->
            <wxc-button text="搜索" @wxcButtonClicked="bottomSearchBtnClicked" class="bottom-search-btn"></wxc-button>
        </div>
    </div>
</template>

<script>
    import { WxcButton, WxcSearchbar, WxcTag, WxcGridSelect } from 'weex-ui'
    import category from '../../components/category'
    import yhq from '../../config/yhq';
    export default {
        name: "yhqSearch",
        components: {
            WxcButton,
            WxcSearchbar,
            WxcTag,
            WxcGridSelect,
            category
        },
        data() {
            return {
                keyword: '',
                historyList:[],
                allCats: {},
                cat1List: [/*{
                    title: "全部",
                    id: -1,
                    width: '130px',
                    checked: true
                }*/],
                cat2List: [{
                    title: "全部",
                    id: -1,

                    checked: true
                }]
            }
        },
        created(){
            this.allCats = yhq.category;
            this.cat1List = [{
                id: -1,
                title: '全部',

                checked: true
            }];
            for(let catKey in this.allCats){
                this.cat1List.push({
                    id: this.allCats[catKey].name,

                    title: this.allCats[catKey].value
                });
            }


            this.historyList.push({
                text: '女装1'
            })
            this.historyList.push({
                text: '女装2'
            })
            this.historyList.push({
                text: '女装3'
            })
            this.historyList.push({
                text: '女装1'
            })

        },
        methods: {
            bottomSearchBtnClicked(e) {
                this.$notice.toast(this.keyword);
                this.jump2List();
            },
            wxcSearchbarCancelClicked() {
                this.keyword = '';
            },
            wxcSearchbarInputOnInput(e) {
                console.log(e)
                this.keyword = e.value;
            },
            wxcSearchbarInputReturned() {

                this.$notice.toast(value);
            },
            wxcSearchbarCloseClicked() {
                this.keyword = '';
            },
            onCat1Select (res, {selectIndex, checked, checkedList}) {
                if(checkedList.length){
                    let item = checkedList[0];
                    //this.checkCat(this.cat1List, item.id);
                    console.log(item);
                    console.log(JSON.stringify(this.cat1List))
                    this.checkCat(this.cat1List, item.id);
                    if(item.id !== -1){
                        let selected = this.allCats[item.id];
                        if(selected.subs && selected.subs.length) {
                            /*selected.subs.map(sub => {
                                sub.title = sub.value;
                                sub.id = sub.name
                            });*/
                            // this.cat2List = [{
                            //     title: "全部",
                            //     id: -1,
                            //
                            //     checked: true
                            // }];
                            this.cat2List = [];
                            selected.subs.forEach(sub => {
                                this.cat2List.push({
                                    title: sub.value,

                                    id: sub.name
                                })
                            });
                            // this.cat2List = selected.subs;
                        }
                    } else {
                        this.cat2List = [{
                            title: "全部",
                            id: -1,

                            checked: true
                        }]
                    }

                    this.checkCat(this.cat2List, -1);
                }
            },
            onCat2Select (res, {selectIndex, checked, checkedList}) {
                if(checkedList.length) {
                    let item = checkedList[0];
                    //this.checkCat(this.cat1List, item.id);
                    console.log(item);
                    this.checkCat(this.cat2List, item.id);
                }
                // Vue.set(this, res, `本次选择的index：${selectIndex}\n是否选中：${checked ? '是' : '否'}\n选中列表：${checkedList.map(item => item.title).join(',')}`);
            },
            historyTagClicked(word){
                this.keyword = word;
                this.checkCat(this.cat1List, -1);
                this.checkCat(this.cat2List, -1);
                this.jump2List();
            },
            checkCat(list, id){
                list.forEach(cat => {
                    cat.checked = cat.id === id;
                })
            },
            getCheckedCat(list){
                return list.find(cat => {
                    return cat.checked;
                }).id;
            },
            jump2List(){
                // this.$router.toWebView({url: obj.coupon_click_url})
                this.$router.open({
                    name: 'yhq.list',
                    params: {
                        q: this.keyword,
                        cat1: this.getCheckedCat(this.cat1List),
                        cat2: this.getCheckedCat(this.cat2List)
                    },
                    navTitle: (this.keyword || '超级搜')
                })
            }
        }
    }
</script>

<!--<style lang="sass" src="bui-weex/src/css/buiweex.scss"></style>-->
<style scoped lang="scss">
    @import 'src/js/css/base.scss';
    .wrapper {
        width: 750px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ffffff;
        padding-left: 25px;
    }

    .flex-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .bottom-search-btn {
        text-align: center;
        background-color: #FF4400;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 25px;
        margin-bottom: 20px;
        color: #ffffff;
    }
    .cat-1{
        padding: 20px;
    }
    .cat-2{
        padding: 20px;
    }
</style>
